<template>
  <div>
    <div class="header">
      <span class="iconfont icon-menu" @click="funs()"></span>
      <select style="font-size: 0.1rem">
        <option value="">北京市</option>
      </select>

      <p>
        <span class="iconfont icon-fangdajing" id="p3"></span>
        <input type="text" value="会员月月领权益" />
        <span class="iconfont icon-yuyin" id="p4"></span>
      </p>
      <span class="iconfont icon-xiaohuomiao1" id="p1"></span>
      <span class="iconfont icon-jia" id="p2"></span>
    </div>
    <div class="zfb">
      <ul>
        <li v-for="(v, i) in arr" :key="i" @click="fun(i)">
          <img :src="v.img" alt="" />
          <p>{{ v.name }}</p>
        </li>
      </ul>
    </div>
    <div class="tu">
      <div>
        <h5>中午好</h5>
        <p>余额查询 <span> > </span></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: "账户", img: "./homes/k1.png" },
        { name: "转账汇款", img: "./homes/k2.png" },
        { name: "贷款", img: "./homes/k3.png" },
        { name: "龙支付", img: "./homes/k5.png" },
      ],
    };
  },
  methods: {
    fun(index) {
      switch (index) {
        case 2:
          this.$router.push("/daik");
          break;
        case 1:
          this.$router.push("/zhuan");
          break;
      }
      console.log(index);
    },
    funs() {
      this.$router.push("/btm");
    },
  },
};
</script>

<style lang="less" scoped>
.header span {
  font-size: 0.16rem;
}

// 图片应试
.tu {
  width: 100%;
  height: 0.45rem;

  background-image: linear-gradient(to bottom, #146ab7 0%, white 50%);

  div {
    width: 90%;
    height: 0.45rem;
    display: flex;
    justify-content: space-between;
    background-color: #fbe0b3;
    margin: auto;
    border-radius: 0 0 0.1rem 0.1rem;
    line-height: 0.45rem;
    // box-shadow: .1rem .1rem .1rem;
    h5 {
      margin-left: 0.1rem;
      font-size: 0.16rem;
      font-weight: 600;
    }
    p {
      font-size: 0.12rem;
      font-weight: 600;
      margin-right: 0.1rem;
      span {
        margin-left: 0.06rem;
      }
    }
  }
}

// zfb  的英式
.zfb {
  width: 80%;
  height: 1.1rem;
  font-size: 0.14rem;
  margin: auto;

  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    // background-color: red;
    align-items: center;
    height: 1.1rem;
    // line-height: 1.1rem;
    li {
      width: 25%;

      text-align: center;
      p {
        line-height: 0.46rem;
        font-weight: 600;
        color: white;
      }

      img {
        margin-top: 0.1rem;
        width: 0.3rem;
        height: 0.25rem;
        background-color: white;
        // display: block;
      }
    }
  }
}

//   header的应试
.Header span:nth-child(1) {
  margin-right: 0.15rem;
}
#p1 {
  margin-left: 0.1rem;
}
#p2 {
  margin-left: 0.2rem;
}
.header p {
  position: relative;
}
.header #p3 {
  position: absolute;
  left: 0.12rem;
  margin-top: 0.03rem;
}
.header #p4 {
  position: absolute;
  right: 0.12rem;
  margin-top: 0.03rem;
}

div {
  width: 100%;
  height: 2rem;
  background-color: #1268b8;
}

.header {
  width: 95%;
  height: 0.45rem;
  line-height: 0.45rem;
  margin: auto;
  display: flex;
  color: white;
  justify-content: space-between;
  font-size: 0.16rem;
  select {
    width: 0.6rem;
    height: 0.16rem;
    border: none;
    background-color: #1268b8;
    color: white;
    margin-top: 0.15rem;
  }
  input {
    width: 1.7rem;
    height: 0.24rem;
    background-color: #397fc4;
    border-radius: 0.1rem;
    text-align: center;
    margin-top: 0.1rem;
    //   position: relative;
  }
}
</style>